import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output

app = dash.Dash(
    __name__,
    external_stylesheets=['css/bootstrap.min.css']
)

app.layout = html.Div(
    [
        html.Br(),
        html.Br(),
        html.Br(),
        dbc.Container(
            [
                dbc.Row(
                    [
                        dbc.Col(dbc.Input(id='input-value',
                                          placeholder='请输入些东西'),
                                width=12),
                        dbc.Col(dbc.Label(id='output-value'),
                                width=12)
                    ]
                )
            ]
        )
    ]
)

"""
对应app实例的回调函数装饰器

app.callback()装饰器按照规定的先Output()后Input()的顺序传入相应对象，而既然是装饰器，自然需要配合自定义回调函数使用。

　　我们的input_to_output()就是对应的回调函数，其参数与装饰器中的Input()对应，而函数内部则用来定义计算处理过程。

　　最后return的对象则对应Output()。
"""
@app.callback(
    Output('output-value', 'children'),
    Input('input-value', 'value')
)
def input_to_output(input_value):
    '''
    简单的回调函数
    '''
    return input_value


if __name__ == '__main__':
    app.run_server()
